<template>
  <div class="audio-box">
    <div class="icon">
      <img
        v-show="smallItem.isPlay"
        src="@/assets/images/wrongBook/icon-play.png"
        @click="handlePause()"
      />
      <img
        v-show="!smallItem.isPlay"
        src="@/assets/images/wrongBook/icon-pause.png"
        @click="handlePlay()"
      />
    </div>
    <VanProgress
      :percentage="smallItem.percentage"
      stroke-width="6"
      :show-pivot="false"
      color="#0CB76C"
    />
    <span style="padding-left: 10px">
      {{ filterTime(smallItem.currentTime) }} /
      {{ filterTime(smallItem.audioDuration) }}
    </span>
  </div>
  <audio
    style="opacity: 0; width: 0px; height: 0px"
    controls
    ref="audioRef"
    @timeupdate="onPlayProgress"
    @ended="onPlayEnd"
  >
    <source src="../yyds.mp3" />
  </audio>
</template>
<script setup>
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";

import { defineProps, reactive, toRefs, ref } from "vue";
import { Progress as VanProgress } from "vant";
dayjs.extend(duration);

const props = defineProps({
  smallItem: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits([
  "onPlay",
  "onPause",
  "updateProgress",
  "onPausePerv",
  "onPlayEnd",
]);
const audioRef = ref();
const state = reactive({
  showPopover: false,
});

const handlePlay = async() => {
  await emit("onPausePerv"); // 上一个先暂停
  if (!audioRef.value) return;
  console.log(audioRef,'--audioRef.value');
  emit("onPlay", audioRef);
  audioRef.value.play();
};
const handlePause = () => {
  if (!audioRef.value) return;
  emit("onPause");
  audioRef.value.pause();
};
const onPlayProgress = (e) => {
  emit("updateProgress", e.srcElement);
};
const onPlayEnd = () => {
  emit("onPlayEnd");
};
const filterTime = (s) => {
  return dayjs.duration(s, "seconds").format("mm:ss");
};

const {  } = toRefs(state);
</script>
<style scoped lang="scss">
.audio-box {
  display: flex;
  align-items: center;
  color: #8e8e8e;
  .icon {
    padding-right: 10px;
    img {
      width: 18px;
    }
  }
  :deep(.van-progress) {
    flex: 1;
  }
}
</style>
